import 'package:flutter/material.dart';
import 'package:flutter6/models/Song.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import '../../util/music_util.dart';
import '../../util/screen_util.dart';

class SquareList extends HookWidget{
  final List<Map> items;

  SquareList({super.key, required this.items});
  @override
  Widget build(BuildContext context) {
    final screen=Screen(context);
    final rows = useState([]);

    getMusicList().then((result) {
      var itemed =[];
      List<Song>? songs = result.songlist!.sublist(0,60);
      for(var item in songs!){
        String? msg = item.songname! + ' / ' + item.singername!;
        itemed.add({
          'id': item.songmid,
          'img': item.songimg,
          'title': msg,
        });
      }
      for(var i=0;i<itemed.length;i+=3){
        rows.value.add(itemed.sublist(i,i+3));
      }
    });

    // for(var i=0;i<items.length;i+=3){
    //   rows.add(items.sublist(i,i+3));
    // }

    return Container(
        margin: EdgeInsets.only(top: screen.calc(2)),
        padding: EdgeInsets.only(left: screen.calc(32), right: screen.calc(32)),
        child: Column(
          children: rows.value.map<Widget>((row)=>
              Container(
                margin: EdgeInsets.only(top: screen.calc(36)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: row.map<Widget>((item)=>Container(
                    width: screen.calc(214),
                    height: screen.calc(300),
                    child: GestureDetector(
                      child: Column(
                          children: [
                            Image.network(
                              item['img'],
                              width: screen.calc(214), height: screen.calc(214),
                              fit: BoxFit.fill,
                            ),
                            Container(
                              margin: EdgeInsets.only(top: screen.calc(8)),
                              child: Text(item['title'], maxLines: 2, style: TextStyle(
                                fontSize: screen.calc(24),
                              )),
                            ),
                          ]
                      ),
                      onTap: (){
                        Navigator.pushNamed(context, '/player',
                            arguments: {
                              'id' : item['id']
                            });
                      },
                    ),
                  )).toList(),
                ),
              )
          ).toList(),
        )
    );
  }

}